<template>
	<view class="content">
		<view class="page-section page-section-gap">
			<input class="uni-input" maxlength="10" placeholder="Title" v-model="title" />
			<!-- 时间选择 -->
			<uni-datetime-picker></uni-datetime-picker>
			<input class="uni-input" maxlength="10" placeholder="证件号码" v-model="title" />
			<input class="uni-input" maxlength="10" placeholder="证件姓名" v-model="title" />
			<!-- 失踪城市 -->
			<view class="uni-input" style="padding-top: 10px;">
				<picker id="picker" mode="multiSelector" :range="range" :value="value" @columnchange="columnchange"
					@cancel="pickerCancel">
					<view style="font-size: 15px;">{{selected}}</view>
					<!-- <view style="padding-top: 15px;">选择的时候，“市”放空则精确到省，“区县”放空则精确到市</view> -->
				</picker>
			</view>
		</view>


		<textarea class="uni-textarea" placeholder="Say something" v-model="content" />
		<view style="text-align: center;">
			插入图片
		</view>
		<easy-upload :dataList="dataList" uploadUrl="http://localhost:3000/upload"
			deleteUrl='http://localhost:3000/upload' :types="types" @successImage="successImage"
			@successVideo="successvideo" />
		<button type="primary" style="background-color: #4CD964;" @click="save">保存</button>
	</view>
	</view>
</template>

<script>
	import {
		area
	} from '@/js_sdk/lisenh-cityPicker/area.js'
	export default {
		data() {
			return {
				selected: '请选择失踪地点',
				range: [
					[''],
					[''],
					['']
				],
				provinceCodes: [],
				cityCodes: [],
				value: [0, 0, 0]
			}
		},
		methods: {
			pickerCancel() {
				console.log('pickerCancel')
			},
			columnchange: function(e) {
				this.value[e.detail.column] = e.detail.value
				if (0 == e.detail.column) {
					let provinceCode = this.provinceCodes[e.detail.value - 1]
					this.range[1] = ['']
					this.range[2] = ['']
					let cities = ['']
					this.cityCodes = []
					for (let cityCode in area.city_list) {
						if (Number(cityCode) >= Number(provinceCode) && Number(cityCode) <= Number(provinceCode) +
							9900) {
							cities.push(area.city_list[cityCode])
							this.cityCodes.push(cityCode)
						}
					}
					this.range[1] = cities
					this.value.splice(1, 1, 0)
					this.value.splice(2, 1, 0)
				} else if (1 == e.detail.column) {
					this.value[2] = 0
					let cityCode = this.cityCodes[e.detail.value - 1]
					this.range[2] = ['']
					let counties = ['']
					for (let countyCode in area.county_list) {
						if (Number(countyCode) >= Number(cityCode) && Number(countyCode) <= Number(cityCode) + 99) {
							counties.push(area.county_list[countyCode])
						}
					}
					this.range[2] = counties
					this.value.splice(2, 1, 0)
				}
				this.$forceUpdate()

				this.selected = this.range[0][this.value[0]] + "," + this.range[1][this.value[1]] + "," + this.range[2]
					[this.value[2]]
				// if (this.range[2][this.value[2]]) {
				//     this.selected = this.range[2][this.value[2]]
				// } else if(this.range[1][this.value[1]]) {
				//     this.selected = this.range[1][this.value[1]]
				// } else if(this.range[0][this.value[0]]) {
				//     this.selected = this.range[0][this.value[0]]
				// }
			}
		},
		onLoad: function() {
			for (let provinceCode in area.province_list) {
				this.range[0].push(area.province_list[provinceCode])
				this.provinceCodes.push(provinceCode)
			}
		}
	}
</script>

<style>
	.content {
		width: 90%;
		height: 30%;
		padding: 0 5%;
	}

	.tabs {
		border: 1px solid #CCCCCC;
		margin-top: 10px;
		height: 40px;
		border-radius: 10px;
		padding-left: 5%;
	}

	.uni-input {
		width: 100%;
		height: 40px;
		margin-top: 10px;
		border-radius: 10px;
		box-shadow: 0px 4px 0px #EEEEEE;
		border: 1px solid #CCCCCC;
	}

	.uni-textarea {
		width: 100%;
		height: 150px;
		margin-top: 20px;
		border-radius: 10px;
		box-shadow: 0px 4px 0px #EEEEEE;
		border: 1px solid #CCCCCC;
	}
</style>
